<template>
    <div>

      <el-card class="box-card">
        <div slot="header" style="text-align:left">
          <span >商品类型列表</span>
          <el-button style="float: right; padding: 3px 0" @click="modify"  type="text">添加</el-button>
        </div>
         <el-table
              :data="kinds"
              border
              style="width: 100%">
            
              <el-table-column
                prop="name"
                label="名称"
                style="width: 20%">
              </el-table-column>

              <el-table-column
                prop="description"
                label="描述"
                style="width: 50%">
              </el-table-column>
          
              
              <el-table-column
                label="操作"
              style="width: 10%">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                  <el-button @click="dele(scope.row)" type="text" size="small">删除</el-button>
                  <el-button @click="setAttribute(scope.row)" type="text" size="small">设置属性</el-button>
                </template>
              </el-table-column>
            </el-table>

      </el-card>
  
     <el-dialog
      title="添加"
      :visible.sync="dialog"
      width="30%"
      center>
        <el-form :model='form'  label-width="80px" ref="form"> 
          <el-form-item label="名称" prop="name">
            <el-input  v-model="form.name"></el-input>
          </el-form-item>
            <el-form-item label="描述" prop="description">
            <el-input  type='textarea' v-model="form.description"></el-input>
          </el-form-item>
      
          <el-form-item>
            <el-button type="primary" @click="onSubmit">更新</el-button>
            <el-button @click="dialog=false">取消</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>

   

</div>
</template>

<script>
  import {productkinds,productkindmodify,productkindDele} from "@/libs/api.js"
  export default {
    methods: {
      dele(row) {
        let ref = this;
         productkindDele(row.id).then((res) => {
              this.$util.success();
              var temp=-1;
              for(var i=0;i<this.kinds.length;i++){
                 if(this.kinds[i].id==row.id){
                    temp=i;
                 }
              }
              if(temp!=-1){
                 this.kinds.splice(temp,1);
              }
            });
      },
      modify(){
         this.reset();
          this.dialog=true;
      },
      reset(){
          this.form.name="";
          this.form.description="";
          this.form.id="";
      },
      edit(row){
           this.form.name=row.name;
           this.form.description=row.description;
           this.dialog=true;
           this.form.id=row.id;
      },
      setAttribute(row){
            this.$router.push({
                 path: "/attribute/"+row.id,query: { kindname: row.name}
            });
      },
      onSubmit(){
          productkindmodify(this.form).then((res) => {
             this.$util.success();
             //修改
             if(this.form.id){
                for(var i=0;i<this.kinds.length;i++){
                 if(this.kinds[i].id==this.form.id){
                    this.kinds[i].name=this.form.name;
                    this.kinds[i].description=this.form.description;
                 }
               }
               this.form.id="";
             }else{//添加
                 let temp = {"name":this.form.name,"description":this.form.description,"id":res.id};
                 this.kinds.push(temp);
             }
             this.dialog=false;
             this.reset();
          })
        
      }
    },

    mounted(){
          productkinds().then((res) => {
						 this.kinds=res;
					})
    },

    data() {
      return {
        kinds:[] ,
        dialog:false,
        form: {
          name: '',
          description: ''
        }
      }
    }
  }
</script>